<template>
  <div class="demo">
    <div class="demo-title">动态加载选项</div>
    <div class="demo-content">
      <Cascader
        v-model:value="value"
        :options="options"
        :load-data="loadData"
        placeholder="Please select"
        change-on-select
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Cascader from '@sscd/cascader';
  import type { CascaderProps } from '@sscd/cascader';
  const value = ref<string[]>([]);
  const options = ref<CascaderProps['options']>([
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      isLeaf: false,
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      isLeaf: false,
    },
  ]);
  const loadData: CascaderProps['loadData'] = (selectedOptions) => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    // load options lazily
    setTimeout(() => {
      targetOption.loading = false;
      targetOption.children = [
        {
          label: `${targetOption.label} Dynamic 1`,
          value: 'dynamic1',
        },
        {
          label: `${targetOption.label} Dynamic 2`,
          value: 'dynamic2',
        },
      ];
      options.value = [...options.value];
    }, 1000);
  };
</script>
